<template>
  <nav class="navbar">
    <!-- 左侧：Logo -->
    <div class="navbar-left">
      <span class="logo">Python私教</span>
    </div>

    <!-- 中间：导航链接 -->
    <div class="navbar-center">
      <button
          v-for="link in links"
          :key="link.name"
          class="nav-link"
          @click="handleLinkClick(link)"
      >
        {{ link.name }}
      </button>
    </div>

    <!-- 右侧：注册/登录按钮 -->
    <div class="navbar-right">
      <button class="btn-register">注册</button>
      <button class="btn-login">登录</button>
    </div>
  </nav>
</template>

<script setup>
import { ref } from 'vue';

// 导航链接数据
const links = ref([
  { name: '首页', path: '/' },
  { name: '关于', path: '/about' },
]);

// 暴露点击事件
const emit = defineEmits(['link-click']);

// 处理导航链接点击事件
const handleLinkClick = (link) => {
  emit('link-click', link);
};
</script>

<style scoped>
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: linear-gradient(90deg, #007bff, #00bfff); /* 蓝色渐变背景 */
  color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  height: 65px;
}

.navbar-left .logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
}

.navbar-center {
  display: flex;
  gap: 20px;
}

.nav-link {
  background: none;
  border: none;
  color: white;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.navbar-right {
  display: flex;
  gap: 10px;
}

.btn-register,
.btn-login {
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.btn-register {
  background-color: #28a745; /* 绿色 */
  color: white;
}

.btn-register:hover {
  background-color: #218838; /* 深绿色 */
}

.btn-login {
  background-color: #17a2b8; /* 青色 */
  color: white;
}

.btn-login:hover {
  background-color: #138496; /* 深青色 */
}
</style>